<template>
  <div class="article">
    <!-- 文章标题和信息 -->
    <h1>{{ article.title || "未命名文章" }}</h1>
    <p class="article-info">
      作者: <a :href="'/user_info/' + article.authorID">{{ article.authorName || "未知作者" }}</a> | 
      发布时间: {{ new Date(article.buildTime).toLocaleDateString() }} | 
      点赞量: {{ article.likes }} | 浏览量: {{ article.views }}
    </p>
    <div class="article-content" v-html="convertToHtml(article.content || '暂无内容')"></div>
  </div>

  <!-- 点赞与收藏按钮 -->
  <div class="actions">
    <button 
      class="like-button" 
      :class="{ active: isLiked }" 
      @click="toggleLike">
      👍 {{ isLiked ? '已点赞' : '点赞' }} ({{article.likes}})
    </button>
    <button 
      class="favorite-button" 
      :class="{ active: isFavorited }" 
      @click="toggleFavorite">
      ⭐ {{ isFavorited ? '已收藏' : '收藏' }}
    </button>
  </div>
  <el-button class="back" @click="handleClickBack()"><el-icon><ArrowLeft /></el-icon>返回</el-button>

</template>


<script setup lang="ts">
import { ref, onMounted } from 'vue';
import MarkdownIt from 'markdown-it';
import { useUserStore } from '@/stores/user';
import axios from 'axios';
import { useRoute } from 'vue-router';
import router from '@/router';

const route = useRoute();
const user = useUserStore();
const my_id = user.loginstatus ? user.userInfo.id : -1;

// Markdown 转换器
const md = new MarkdownIt();

// 文章数据
const article = ref({
  id: 1,
  cover: "",
  title: "",
  authorID: 7,
  authorName: "18327103472",
  buildTime: "2024-10-11T16:35:54",
  content: "",
  likes: 0,
  saves: 0,
  categoryID: 1,
  views: 0,
  updateTime: "2024-10-11T16:35:54",
  status: "DRAFT",
  deleted: false
});

const isLiked = ref(false);
const isFavorited = ref(false);

// Markdown 转 HTML
const convertToHtml = (content: string) => {
  return md.render(content);
};

// 切换点赞状态
const toggleLike = () => {
  axios.post(`/api/articles/like/${my_id}/${article.value.id}`)
    .then(res => {
      console.log(res);
      
      const is = res.data.data; // 后端返回true或false
      if (is) {
        isLiked.value = true;
        article.value.likes++; // 点赞成功，更新点赞数量
      } else {
        isLiked.value = false;
        article.value.likes--; // 取消点赞成功，更新点赞数量
      }
    })
    .catch(err => {
      console.error(err);
    });
};


// 切换收藏状态（伪代码，假设有相应的接口）
const toggleFavorite = () => {
  isFavorited.value = !isFavorited.value;
};

// 页面加载时获取文章数据和点赞状态
onMounted(() => {
  const id = route.params.id;
  if (id) {
    // 获取文章详情
    axios.get(`/api/articles/${id}`)
      .then(rsp => {
        article.value = rsp.data.data;

        // 获取点赞状态
        axios.get(`/api/articles/islike/${my_id}/${article.value.id}`)
          .then(res => {
            isLiked.value = res.data.data === true; // 更新点赞状态
          });
      });
  }
});
const handleClickBack = () => {
   
    router.back();
  }

</script>


  <style scoped>
  /* 文章内容样式 */
  .article {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    background-color:  var(--bReadContentBgColor);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .article-info {
    color:  var(--bTextColor);
    font-size: 14px;
    text-align: center;
    margin-bottom: 15px;
  }
  
  .article-content {
    font-size: 16px;
    line-height: 1.8;
    color:  var(--bTextColor);
  }
  
  /* 评论部分 */
  .comment {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color:  var(--bReadContentBgColor);
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  /* 按钮样式 */
  .actions {
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .like-button,
  .favorite-button {
    background-color:  var(--bBgColor);
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
  }
  
  .like-button.active,
  .favorite-button.active {
    background-color:  var(--bBorderColor);
    color: var(--bTextColor);
  }
  
  .like-button:hover,
  .favorite-button:hover {
    background-color:  var(--bBorderColor);
  }
  
  /* 响应式设计 */
  @media (max-width: 768px) {
    .article {
      margin: 20px;
    }
    
    .actions {
      right: 20px;
      bottom: 20px;
    }
  
    .like-button,
    .favorite-button {
      font-size: 14px;
      padding: 10px 15px;
    }
  }
  .back {
    cursor: pointer;
    position: absolute;
    left: 15%;
    top: 12%;
  }
  
  .back:hover {
    filter: brightness(0.8) contrast(1.2);
  }
  </style>
     